import classnames from "classnames"
import { Form, Input, Label } from "reactstrap"
import { DOTS, usePagination } from "./usePagination"

const Pagination = (props) => {
  const {
    onPageChange,
    totalCount,
    siblingCount = 1,
    currentPage,
    pageSize,
    className,
    setPagesize
  } = props

  const paginationRange = usePagination({
    currentPage,
    totalCount,
    siblingCount,
    pageSize
  })
  if (currentPage === 0) {
    return null
  }
  const onNext = () => {
    onPageChange(currentPage + 1)
  }

  const onPrevious = () => {
    onPageChange(currentPage - 1)
  }

  const lastPage = paginationRange[paginationRange.length - 1]

  const handlePageChange = (e) => {
    setPagesize(e.target.value)
    onPageChange(1)
  }

  return (
    <div className="d-flex align-items-center justify-content-between pt-1">
      <div className="seletDiv ">
        <Form>
          <div className="d-flex align-items-center">
            <Label className="form-label fw-800" htmlFor="select-basic">
              Show:
            </Label>
            <Input
              type="select"
              name="select"
              className="select border"
              id="select-basic"
              defaultValue={pageSize}
              onChange={handlePageChange}
            >
              <option value={5}>5 items</option>
              <option value={10}>10 items</option>
              <option value={15}>15 items</option>
              <option value={20}>20 items</option>
              <option value={50}>50 items</option>
            </Input>
          </div>
        </Form>
      </div>
      <div>
        <ul
          className={classnames("pagination-container", {
            [className]: className
          })}
        >
          <li
            className={classnames("pagination-item", {
              disabled: currentPage === 1
            })}
            onClick={onPrevious}
          >
            <div className="arrow left" />
          </li>
          {paginationRange.map((pageNumber, i) => {
            if (pageNumber === DOTS) {
              return (
                <li className="pagination-item dots" key={i}>
                  &#8230;
                </li>
              )
            }

            return (
              <li
                className={classnames("pagination-item", {
                  selected: pageNumber === currentPage
                })}
                onClick={() => onPageChange(pageNumber)}
                key={i}
              >
                {pageNumber}
              </li>
            )
          })}
          <li
            className={classnames("pagination-item", {
              disabled: currentPage === lastPage
            })}
            onClick={onNext}
          >
            <div className="arrow right" />
          </li>
        </ul>
      </div>
    </div>
  )
}

export default Pagination
